<template>
	<div class="label-wall">
		<panel :title_key="title_key">
			<div class="label-wall_content" slot="content">
				<iv-badge v-for="(item, _index) in content" :key="_index" class="label-wall_content-tag" :count="item.linkNum" :overflow-count="overflow_count">
					<iv-tag type="dot" :color="item.heat | heatTagColor">{{ item.name }}</iv-tag>
				</iv-badge>
			</div>
		</panel>
	</div>
</template>

<script>
import Panel from '@/components/panel';
export default {
	components: { Panel },
	data() {
		return {
			title_key: 'label_wall',
			overflow_count: this.$store.getters.system_overflowCount,
			content: []
		};
	},
	created() {
		this.initData()
	},
	methods: {
		initData() {
			this.$api.lable.getHome().then(res => {
				this.content = res.data
			})
		}
	}
};
</script>

<style lang="scss">
.label-wall {
	&_content {
		&-tag {
			> sup {
				top: -5px;
				right: 5px;
				height: 13px;
				font-size: 10px;
				line-height: 10px;
			}
		}
		div {
			span.ivu-tag-dot-inner {
				margin-right: 0;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
.label-wall {
	&_content {
		padding: 5px 20px;
		&-tag {
			margin-top: 8px;
			margin-right: 20px;
		}
		div {
			padding: 0 8px;
		}
	}
}
</style>
